import apiTool, { getUserInfoUrl, getUserTypeValue } from "@/command/apiTool";
import { defineComponent, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import ListView from "@/components/ListView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import RowView from "@/components/RowView";
import TextView from "@/components/TextView";
import Text from "@/components/Text";
import { Divider } from "vant";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import { useRequest } from "./request";
import router from "@/router";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";

export default defineComponent({
  setup(props, {}) {
    const form = ref({});
    const { page, btnAction } = useRequest();
    const renderItem = (e: any) => {
      const buttons: IButtonGroupViewData[] = (
        [
          {
            display: e.flag == "0",
            text: getUserTypeValue() == "dh" ? "邀请结队" : "申请结队",
            type: "primary",
            color: "linear-gradient(90deg, #1989FA 0%, #73B9FF 100%)",
            onClick: () => {
              btnAction({
                applyType: "1",
                farmerId: e.id,
              });
            },
          },
          {
            display: e.flag == "1",
            text: getUserTypeValue() == "dh" ? "已邀请" : "已申请",
            style: {
              background: "#c7c7c7",
            },
          },
        ] as IButtonGroupViewData[]
      ).filter((e) => e.display);
      const data = [
        {
          name: getUserTypeValue() == "dh" ? "种植品种" : "主营业务",
          value: e.zyyw,
          width: "100%",
        },
      ];
      return (
        <div
          class="flex flex-col mt-[14px] w-full"
          // onClick={() => router.push(`/formationDetail?id=${e.id}`)}
        >
          <RoundInfo
            // right={() => <Text>日期: {e.date}</Text>}
            src={e.logo}
            title={e.entityName}
            data={data}
          />
          <GreyBlock class="mt-[12px]">
            <RowView class="justify-between flex-1">
              <RowView>
                <TextView>{e.address}</TextView>
              </RowView>
              <RoundEdgeButtonGroup data={buttons} />
            </RowView>
          </GreyBlock>
          <Divider />
        </div>
      );
    };
    const render1 = () => {
      const data: IFilterMenuChoose[] = [
        { type: "area", key: "areaCode" },
        { type: "productType", key: "productTypeId", title: "种植品种" },
        // { type: "datePicker", key: "time" },
      ];
      return (
        <div
          class={"mx-[-15px] mt-[-20px]"}
          style={{
            backgroundColor: "#fff",
            boxShadow: "0px 2px 3px 1px rgba(0,0,0,0.03)",
          }}
        >
          <FilterMenuSearch
            choose={data}
            v-model={form.value}
            searchKey="name"
          />
        </div>
      );
    };
    const render2 = () => {
      return (
        <ListView
          {...getUserInfoUrl({
            dh: "/api/H5/richHelpFormationApply/large/queryJdListByDh",
            xh: "/api/H5/richHelpFormationApply/small/queryJdListByXh",
          })}
          type="page"
          ref={page}
          renderItem={renderItem}
          params={form.value}
        />
      );
    };
    return () => (
      <PageTitle
        title={"结队申请"}
        bgColor={"white"}
        childClass={"p-14 pt-20 pb-20 bg-[#FFFFFF]"}
      >
        {render1()}
        {render2()}
      </PageTitle>
    );
  },
});
